iT邦幫忙

2023 iThome 鐵人賽

DAY 26
0
Software Development

C# 學習之路系列 第 27

[DAY26] C#基礎與實作(WinForms開發-畫資料圖表)

  • 分享至 

  • xImage
  •  

C# 程式基礎

WinForms開發-畫資料圖表:

ScottPlot:

ScottPlot 是一個用於在C# WinForms應用程式中繪製高品質科學圖形的強大工具

  • 步驟:
    1. 建立 WinForms 專案:
      首先,需要在Visual Studio中建立一個新的WinForms應用程式專案。這是您將要在其中嵌入ScottPlot的主應用程式。
    2. 在Visual Studio中,安裝 ScottPlot 庫:
      要使用 ScottPlot,您需要將其添加到您的專案中。您可以使用NuGet套件管理器輕鬆安裝它。
      • 步驟1:
        • 方法一:
          打開"工具"->"NuGet套件管理器"->"管理方案的NuGet套件"
             https://ithelp.ithome.com.tw/upload/images/20231007/20163217heNuwcKNXG.png
        • 方法二:
          對WinForm專案點右鍵->"管理NuGet套件"
          https://ithelp.ithome.com.tw/upload/images/20231007/20163217bLo1JETMj3.png
      • 步驟2:
        瀏覽搜尋"ScottPlot"->"安裝"
        https://ithelp.ithome.com.tw/upload/images/20231007/20163217rhmmyZ4671.png

參數介紹與應用範例:

  • Plot:
    使用 ScottPlot.Plot 創建一個新的圖表,指定寬度和高度。

    var plt = new ScottPlot.Plot(width, height);
    
    • width:圖表的寬度(像素)
    • height:圖表的高度(像素)
        
    • Plot常用功能:
      • 添加網格線:
        plt.Grid(true);
        https://ithelp.ithome.com.tw/upload/images/20231007/20163217Bmy94hG7LX.png
      • 設置座標範圍:
        //(Xmin,XMax,Ymin,YMax)
        Plot.SetAxisLimits(0, 6, 0, 20);
        //(Xmin,XMax)
        Plot.SetAxisLimitsX(0, 6);
        //(Ymin,YMax)
        Plot.SetAxisLimitsY(0, 20);
        
      https://ithelp.ithome.com.tw/upload/images/20231007/201632171tZ7uQzuij.png
      • 顯示圖例的標籤:
        plt.Legend();
        https://ithelp.ithome.com.tw/upload/images/20231007/20163217N3hXGo3ybW.png
      • 添加文本標籤:
        plt.PlotText("重要資訊", x: 3, y: 15, fontSize: 12, color: Color.Green, bold: true);
        
      https://ithelp.ithome.com.tw/upload/images/20231007/20163217GOjEvQlGAz.png
      • 添加水平線/垂直線:
        // 添加垂直線
        Plot.PlotVLine(5, label: "垂直線", color: Color.Red, lineStyle: LineStyle.Dash);
        
        // 添加水平線
        Plot.PlotHLine(10, label: "水平線", color: Color.Blue, lineStyle: LineStyle.Dot);
        
      https://ithelp.ithome.com.tw/upload/images/20231007/2016321781lzC1NgDI.png
      • 更改 X 軸和 Y 軸的刻度:
        Plot.XTicks(new double[] { 1, 2, 3, 4, 5 }, new string[] { "A", "B", "C", "D", "E" });
        Plot.YTicks(new double[] { 0, 10, 20, 30 }, new string[] { "Low", "Medium", "High", "Max" });
        
      https://ithelp.ithome.com.tw/upload/images/20231007/2016321796tMwLWmDu.png
  • PlotScatter:
    使用 PlotScatter 方法添加一組數據點,生成折線圖。

    • 程式:
      plt.PlotScatter(double[] xs, double[] ys, double markerSize = 5, string label = null);
      
      • xs:X 軸上的數據點陣列。
      • ys:Y 軸上的數據點陣列。
      • markerSize:數據點標記的大小。
      • label:用於圖例的標籤。
    • 範例:
      var Plot = formsPlot1.Plot;
      // 添加數據
      double[] xs = { 1, 2, 3, 4, 5 };
      double[] ys = { 5, 4, 9, 7, 1 };
      plt.PlotScatter(xs, ys, markerSize: 10, label: "數據點");
      
      // 設置標籤和標題
      plt.Title("折線圖示例");
      plt.XLabel("X 軸標籤");
      plt.YLabel("Y 軸標籤");
      Plot.Legend(); //顯示圖例的標籤
      formsPlot1.Refresh();
      
      https://ithelp.ithome.com.tw/upload/images/20231007/201632170AHRCwYLou.png
  • PlotBar:
    使用 PlotBar 方法添加一組條形圖數據。

    • 程式:
      plt.PlotBar(double[] positions, double[] values, double barWidth = 0.8, string label = null);
      
      • positions:條形圖的位置。
      • values:條形圖的高度或值。
      • barWidth:條形的寬度。
      • label:用於圖例的標籤。
    • 範例:
          var Plot = formsPlot1.Plot;
          double[] xs = DataGen.Consecutive(51);
          double[] ys = DataGen.Consecutive(51);
          Plot.PlotBar(xs, ys, barWidth:0.8, label: "aaa");
          Plot.Legend(); //顯示圖例的標籤
          formsPlot1.Refresh();
      
      https://ithelp.ithome.com.tw/upload/images/20231007/20163217KuSyllhjZK.png

官網Demo:

更多可以查看的範例,可以再參考官網Demo

參考來源

  1. ChatGPT
  2. C#最強入門邁向頂尖高手之路王者歸來
  3. w3schools C#
  4. 圖解資料結構 × 演算法:運用C#
  5. github: Windows Forms Demo Source
  6. scottplot.net

期望挑戰30天持續更新成功 ~ DAY26


上一篇
[DAY25] C#基礎與實作(常見演算法-廣度優先搜尋)
下一篇
[DAY27] C#基礎與實作(WinForms開發-實作練習-檔案複製分類)
系列文
C# 學習之路31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言